<template>
	 <nav class="menu-container">
	    <ul>
	      <li><a href="http://www.100sucai.com/online/6064/#">Some cool quote about <strong>home</strong></a>
			<img src="http://www.100sucai.com/online/6064/images/home.jpg" alt="Some cool quote about home"></li>
	      <li><a href="http://www.100sucai.com/online/6064/#">Some cool quote about <strong>movies</strong></a>
			<img src="http://www.100sucai.com/online/6064/images/home.jpg" alt="Some cool quote about movies"></li>
	      <li><a href="http://www.100sucai.com/online/6064/#">Some cool quote about <strong>music</strong></a>
			<img src="http://www.100sucai.com/online/6064/images/home.jpg" alt="Some cool quote about music"></li>
	      <li><a href="http://www.100sucai.com/online/6064/#">Some cool quote about <strong>games</strong></a>
			<img src="http://www.100sucai.com/online/6064/images/home.jpg" alt="Some cool quote about games"></li>
	      <li><a href="http://www.100sucai.com/online/6064/#">Some cool quote about <strong>books</strong></a>
			<img src="http://www.100sucai.com/online/6064/images/home.jpg" alt="Some cool quote about books"></li>
	      <li><a href="http://www.100sucai.com/online/6064/#">Some cool quote about <strong>art</strong></a>
		  <img src="http://www.100sucai.com/online/6064/images/home.jpg" alt="Some cool quote about art"></li>
	    </ul>
	  </nav>
</template>

<script>
</script>

<style scoped="scoped">
	
	/* p
	{
	  margin: 0 0 1em 0;
	  padding: 0;
	  line-height: 1.4em;
	} */
	
	/* .container
	{
	  margin: 0 auto;
	  width: 960px;
	} */
	
	/* article
	{
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	  padding: 1em;
	  width: 100%;
	  float: left;
	  background-color: #fff;
	}
	
	article p.lorem-ipsum
	{
	  color: #ccc;
	} */
	
	.menu-container
	{
	  font-family: Georgia, Times, "Times New Roman", serif;
	  width: 100%;
	  float: left;
	  background-color: #fff;
	}
	
	.menu-container ul, .menu-container li
	{
	  margin: 0;
	  padding: 0;
	  list-style: none;
	  position: relative;
	}
	
	.menu-container li
	{
	  float: left;
	  width: 16.66666666666667%;
	}
	
	.menu-container li img
	{
	  width: 100%;
	}
	
	.menu-container li a
	{
	  color: #0CC5DA;
	  text-decoration: none;
	  line-height: 1.4em;
	  font-size: 1.5em;
	  padding: 10%;
	  background-color: #000;
	  color: #fff;
	  position: absolute;
	  width: 100%;
	  height: 100%;
	
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	
	  filter: alpha(opacity=0);
	  -moz-opacity: 0;
	  -khtml-opacity: 0;
	  opacity: 0;
	
	  -webkit-transition: all 0.2s ease-in-out;
	  -moz-transition: all 0.2s ease-in-out;
	  -o-transition: all 0.2s ease-in-out;
	  transition: all 0.2s ease-in-out;
	}
	
	.menu-container li a:hover
	{
	  color: #DCE808;
	  text-decoration: underline;
	  text-decoration: none;
	  width: 110%;
	  height: 110%;
	  margin-top: -5%;
	  margin-left: -5%;
	  padding: 14%;
	
	  filter: alpha(opacity=80);
	  -moz-opacity: 0.8;
	  -khtml-opacity: 0.8;
	  opacity: 0.8;
	}
	 
</style>
